<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文本样式</title>
    <style>
        body{
            height: 3000px;
        }
        article {
            border: 1px solid red;
            font-size: 20px;
        }

        .text-center {
            text-align: center;
        }

        .box-center {
            margin: 0 auto;
        }

        .box {
            width: 100px;
            height: 100px;
            background-color: rgb(240, 108, 108);
        }

        .indent {
            text-indent: 2em;
        }

        .decoration {
            text-decoration: line-through;
        }

        a {
            text-decoration: none;
        }
        .p1{
            text-transform:lowercase;
        }
        .p2{
            text-transform: capitalize;
        }
        .p3{
            text-transform: uppercase;
        }
        .shadow{
            font-size: 20px;
            font-weight: bold;
            text-shadow: 5px 5px 4px red;
        }
        .t2{
            line-height: 100px;
        }
        .c2{
            text-align: center;
        }
        .t3{
            word-spacing: 20px;
        }
        .t4{
            letter-spacing:10px ;
        }
        .p4{
            /* 按照html的原生格式显示 */
            white-space: pre;
        }
        .p5{
            /* 不换行 */
            white-space: nowrap;
        }
        .p6{
            /* 按照html的原生格式显示 ，但是当超过父容器的宽度时候要换行*/
            white-space:pre-wrap ;
        }
        .p7{
            /* 按照html的原生格式显示，但是多个空格会被解析成一个空格，但是换行不会改变（保留换行符） */
            white-space: pre-line;
        }
    </style>
</head>

<body>
    <!-- 
        1.text-align应该加给容器(容器一定要能够设置大小而不是由内容决定)，而不是加给要对齐的元素，让容器里面的元素进行对齐。
        2.text-align可以作用于行内元素(inline)和行内块元素(inline-block) 
        3.不能作用于块级元素(block)
    -->
    <h1 class="text-center">水调歌头·明月几时有</h1>
    <article>
        <p class="text-center indent">明月几时有？把酒4问青天。不知天上宫阙5，今夕是何年？我欲乘风6归去，又恐琼楼玉宇7，高处不胜8寒。起舞弄清影9，何似10在人间？</p>
        <div class="text-center">
            <span>转朱阁11，低绮户，照无眠。不应有恨12，何事长向别时圆？人有悲欢离合，月有阴晴圆缺，此事13古难全。但14愿人长久，千里共婵娟</span>
            <br>
            <img src="./img/ss.jpg" alt="">
        </div>
    </article>

    <div>
        <div class="box box-center"></div>
    </div>
    <div class="text-center">
        <input type="text">
        <br>
        <button>行内块元素</button>
    </div>
    <div>
        <a href="">百度一下</a>
        <br>
        <del>要删除的</del>
        <br>
        <span class="decoration">文字装饰线类型</span>
    </div>
    <div>
        <p class="p1">HELLO WORLD HOW ARE YOU</p>
        <p class="p2">hello hello abc</p>
        <p class="p3">hello hello abc</p>
    </div>
    <div class="text-center">
        <span class="shadow">文本阴影</span>
    </div>
    <div class="box border c2">
        <span class="t2">行高</span>
    </div>
    <!-- letter-spacing 调整英语字母或者汉字的间距 -->
    <!-- word-spacing 调整英语单词之间空格的距离 -->
    <div class="c3">
        <span class="t3">how are you lilei</span><br>
        <span class="t3">怎么是你啊李雷</span><br>
        <span class="t4">how old are you lilei</span><br>
        <span class="t4">怎么老是你啊李雷</span>   
    </div>
    <p class="p4">
        你 知道 么？
        爱  你 并    不容易！
        是上辈子    我    欠 你 的是上辈子    我    欠 你 的是上辈子    我    欠 你 的！
    </p>
    <p class="p5">
        你 知道 么？
        爱  你 并    不容易！
        是上辈子    我    欠 你 的！
    </p>
    <p class="p6">
        你 知道 么？
        爱  你 并    不容易！
        是上辈子    我 欠 你 的！是上辈子    我    欠 你 的是上辈子    我    欠 你 的是上辈子    我    欠 你 的！
    </p>
    <p class="p7">
        你 知道 么？
        爱  你 并    不容易！
        是上辈子    我 欠 你 的！是上辈子    我    欠 你 的是上辈子    我    欠 你 的是上辈子    我    欠 你 的！
    </p>

</body>

</html>